<template>
  <div>
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item
              label="流程标题"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入流程标题"
                v-model="queryParam.procTitle"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item
              label="流程名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                placeholder="请输入流程名称"
                v-model="queryParam.processDefinitionName"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item
              label="发起人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <ZSelectUserByDep
                :button="false"
                placeholder="请选择发起人"
                v-model="queryParam['procStartUserId@IN']"
              />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="6" :sm="12">
              <a-form-item
                label="是否加急"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
              >
                <z-dict-select-tag
                  popupContainer="parent"
                  dictCode="ERP_COMMON_YESNO"
                  v-model="queryParam['bpmnSortFlag@EQ']"
                />
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" @click="searchQuery()" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset()"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
              <a style="margin-left: 8px" @click="handleToggleSearch">
                {{ toggleSearchStatus ? "收起" : "展开" }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-tabs @change="handleBizType" v-model="currentTab">
        <a-tab-pane key="all" tab="全部"></a-tab-pane>
        <template v-for="item in bizTypeOptions">
          <a-tab-pane :key="item.itemValue" :tab="item.itemText"> </a-tab-pane>
        </template>
      </a-tabs>
      <vxe-grid
        id="MyPendingTask"
        ref="vxeTable"
        v-bind="gridOptions"
        :row-config="{ keyField: 'code' }"
        :sort-config="{
          multiple: true,
          remote: true,
          defaultSort: sortConfig.defaultSort,
          trigger: 'cell',
        }"
      >
        <template #tools>
          <a-checkbox
            class="!ml-2"
            :checked="!!zeroFlag"
            @change="handleZeroFlag"
            >超过7天</a-checkbox
          >
        </template>
        <template #action="{ row }">
          <a
            href="javascript:;"
            v-if="row.taskType === 'active'"
            @click="handleComplete(row)"
            >办理</a
          >
          <a href="javascript:;" v-else @click="handleClaim(row)">办理</a>
        </template>
        <template #taskType="{ row }">
          <a-tag v-if="row.taskType === 'active'" color="green">
            待办任务
          </a-tag>
          <a-tag v-if="row.taskType === 'candidateUser'" color="#108ee9">
            候选任务
          </a-tag>
          <a-tag v-if="row.taskType === 'candidateGroup'" color="#2db7f5">
            组任务
          </a-tag>
        </template>
        <template #bpmnSortFlag="{ row }">
          <a-tag v-if="row.bpmnSortFlag === '0'" color="#2db7f5">普通</a-tag>
          <a-tag v-else color="red">紧急</a-tag>
        </template>
      </vxe-grid>
    </div>
    <TaskPendingModal @ok="modalFormOk" :type="modalType" ref="modalForm" />
  </div>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import TaskPendingModal from './TaskPendingModal'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { initDictOptions } from '@/components/dict/ZDictSelectUtil'
export default {
  name: 'MyPendingTask',
  components: {
    TaskPendingModal,
    ZSelectUserByDep,
    ZDictSelectTag
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        { title: '流程标题', field: 'title' },
        {
          title: '任务类型',
          field: 'taskType',
          slots: { default: 'taskType' }
        },
        {
          title: '紧急级别',
          field: 'bpmnSortFlag',
          slots: { default: 'bpmnSortFlag' },
          sortable: true
        },
        { title: '流程名称', field: 'processDefinitionName' },
        { title: '节点名称', field: 'name' },
        { title: '业务分类', field: 'bizType', formatter: 'dictText' },
        {
          title: '流程发起人',
          field: 'procStartUserId',
          formatter: 'dictText'
        },
        { title: '当前审批人', field: 'assignee', formatter: 'dictText' },
        { title: '审批开始时间', field: 'createTime', sortable: true },
        { title: '流程发起时间', field: 'procStartTime', sortable: true },
        {
          title: '操作',
          slots: { default: 'action' },
          fixed: 'right',
          width: 120
        }
      ],
      url: {
        list: '/camunda/task/all/page'
        // list: '/camunda/task/page'
      },
      toolbarConfig: {
        buttons: [],
        import: false,
        slots: {
          buttons: 'tools'
        }
      },
      modalType: 'handling',
      proxyConfig: {
        autoLoad: false
      },
      sortConfig: {
        defaultSort: [
          {
            field: 'bpmnSortFlag',
            order: 'desc'
          },
          {
            field: 'procStartTime',
            order: 'asc'
          }
        ]
      },
      bizTypeOptions: [],
      filters: {},
      currentTab: 'all',
      zeroFlag: 0
    }
  },
  methods: {
    handleComplete(row) {
      this.modalType = 'handling'
      this.$refs.modalForm.show(row)
    },
    handleClaim(row) {
      this.modalType = 'claim'
      this.$refs.modalForm.show(row)
    },
    handleBizType(activeKey) {
      if (activeKey === 'all') {
        delete this.filters['bizType@EQ']
      } else {
        this.filters = {
          ...this.filters,
          'bizType@EQ': activeKey
        }
      }
      this.loadData()
    },
    handleZeroFlag(e) {
      this.zeroFlag = e.target.checked ? 1 : 0
      if (this.zeroFlag === 1) {
        this.queryParam = {
          ...this.queryParam,
          'createDays@GE': 7
        }
      } else {
        delete this.filters['createDays@GE']
        delete this.queryParam['createDays@GE']
      }
      this.loadData()
    },
    searchReset() {
      // 重置
      this.queryParam = {}
      this.zeroFlag = 0
      this.loadData('reload')
    }
  },

  mounted() {
    // if (this.$route.params.code) {
    //   this.processDefinitionKey = this.$route.params.code
    //   this.filters = {
    //     'processDefinitionKey@EQ': this.$route.params.code
    //   }
    // } else {
    //   this.filters = {}
    // }
    // this.loadData()
    initDictOptions('MB_BPMN_BIZ_TYPE').then((res) => {
      if (res.success) {
        this.bizTypeOptions = res.result?.items || []
      }
    })
    this.loadData()
  }
}
</script>
